<template>
  <KView class="pay-price-page">
    <template v-if="shopInfo!==null">
      <KView class="pay-price-page-title" @click="toShopDetail">{{shopInfo.shopName}}</KView>
      <KView class="pay-price-page-content">
        <KView class="pay-price-page-content-title">消费总额</KView>
        <KView class="pay-price-page-content-input clearfix">
          <KView class="pay-price-page-unit">¥</KView>
          <KView class="pay-price-page-price">
            <KView v-if="price===''" class="pay-price-page-price-placeholder">请输入消费总额</KView>
            <input v-if="isMiniprogram" v-model="price" class="pay-price-page-price-input" type="digit" @change="priceChange">
          </KView>
        </KView>
      </KView>
      <KView class="pay-price-page-btn" @click="ensure">确定买单</KView>
    </template>
  </KView>
</template>

<script>
  import Storage from 'storage';
  import SystemUtil from 'utils/systemUtil';
  import storeMixins from 'mixins/storeMixins';

  import CommonApi from 'services/commonApi';

  import GoodsPaymentApi from 'services/goodsPaymentApi';

  export default {
    mixins: [storeMixins],

    data() {
      let obj = this.$route.query;
      let data = {};
      if (obj.p !== undefined) {
        data.partnerId = obj.p;
      } else {
        data.branchId = obj.b;
      }
      return {
        data,
        shopInfo: null,
        price: '',
        isMiniprogram: process.env.isMiniprogram
      };
    },

    created() {
      this.setShopInfo();
    },

    methods: {
      setShopInfo() {
        let data = this.data;
        SystemUtil.showLoading();
        CommonApi.getShopInfo(data).then(shopInfo => {
          this.shopInfo = shopInfo;
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      toShopDetail() {
        let shopInfo = this.shopInfo;
        let partnerId = shopInfo.partnerId;
        let shopData = {};
        if (!SystemUtil.isEmpty(partnerId)) {
          shopData.partnerId = partnerId;
        } else {
          shopData.branchId = shopInfo.branchId;
        }

        if (this.isMiniprogram) {
          let data = SystemUtil.formatFormParam(shopData);
          window.open(`/shopMall?${data}`);
        }
      },

      priceChange() {
        let price = this.price;
        if (price === '') {
          return;
        }

        if (!this.checkValid(price)) {
          this.$api.showToast({
            title: '请输入正确的消费总额',
            icon: 'none'
          });
          this.price = '';
          return;
        }

        price = Number(price);
        let newPrice = SystemUtil.roundValue(price, 2);
        if (price !== newPrice) {
          this.price = String(newPrice);
        }
      },

      ensure() {
        let price = this.price;
        if (price.trim() === '') {
          this.$api.showToast({
            title: '请输入消费总额',
            icon: 'none'
          });
          return;
        }
        if (!this.checkValid(price)) {
          this.$api.showToast({
            title: '请输入正确的消费总额',
            icon: 'none'
          });
          return;
        }

        price = Number(price);
        if (price === 0) {
          this.$api.showToast({
            title: '消费总额不能为0',
            icon: 'none'
          });
          return;
        }

        let shopInfo = this.shopInfo;
        let postData = {
          shouldPayPrice: price,
          branchId: shopInfo.branchId
        };
        let partnerId = shopInfo.partnerId;

        if (!SystemUtil.isEmpty(partnerId)) {
          postData.partnerId = partnerId;
        }

        SystemUtil.showLoading('');
        GoodsPaymentApi.payPrice(postData, this.location.lnglat, 'NOGOODS').then(payRes => {
          if (this.isMiniprogram) {
            wx.requestPayment({
              timeStamp: payRes.timeStamp,
              nonceStr: payRes.nonceStr,
              package: payRes.package,
              signType: payRes.signType,
              paySign: payRes.paySign,
              success: res => {
                this.toPaySuccessPage();
              }
            });
          }
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      toPaySuccessPage() {
        Storage.setSession('payPage', {
          name: this.shopInfo.shopName,
          price: this.price,
          type: 'NOGOODS'
        });
        if (this.isMiniprogram) {
          this.$emit('to-page', '/paymentSuccess');
        }
      },

      checkValid(price) {
        let patrn = /^\d+(\.\d+)?$/;
        return patrn.test(price);
      }
    }
  };

</script>

<style lang="scss">
  .pay-price-page {
    height: 100%;
    background: #efeef3;

    .pay-price-page-title {
      height: formatPx(100);
      line-height: formatPx(100);
      text-align: center;
      font-size: formatPx(32);
    }

    .pay-price-page-content {
      margin: 0 formatPx(30);
      margin-top: formatPx(20);
      background: #ffffff;
      border: 1px solid #e1e1e3;
      border-radius: 6px;
      padding: formatPx(40) formatPx(30);
      height: formatPx(200);

      .pay-price-page-content-title {
        font-size: formatPx(32);
      }

      .pay-price-page-content-input {
        margin-top: formatPx(20);
        height: formatPx(50);

        >div {
          float: left;
          height: 100%;
        }

        .pay-price-page-unit {
          line-height: formatPx(50);
          font-size: formatPx(30);
          width: formatPx(40);
        }

        .pay-price-page-price {
          width: calc(100% - #{formatPx(40)});
          position: relative;

          >* {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
          }

          .pay-price-page-price-placeholder {
            line-height: formatPx(50);
            font-size: formatPx(30);
            color: #999999;
          }

          .pay-price-page-price-input {
            border: none;
            background: none;
            padding: 0;
            font-size: formatPx(30);
            line-height: formatPx(50);
          }
        }
      }
    }

    .pay-price-page-btn {
      margin: 0 formatPx(30);
      margin-top: formatPx(40);
      height: formatPx(90);
      line-height: formatPx(90);
      font-size: formatPx(30);
      background: #59c264;
      color: #ffffff;
      text-align: center;
      border-radius: formatPx(45);
    }
  }

</style>
